<template>
  <section class="firm-manage" v-cloak>
    <form @keyup.enter="search" @submit.prevent>
      <el-row class="search-box sc-search-box">
        <el-col :span="24">
          <label for="" class="choose">
            <span>账号名称：</span>
            <el-input size="small" class="width200 padding-b15" placeholder="模糊搜索账号名称" v-model.trim="form.user_name" :maxlength="50"></el-input>
          </label>
          <label for="" class="choose">
            <span>用户名称：</span>
            <el-input size="small" class="width200 padding-b15" placeholder="请输入用户名称" v-model.trim="form.name" :maxlength="50"></el-input>
          </label>
          <label for="" class="choose">
            <span>手机号：</span>
            <el-input size="small" class="width200 padding-b15" placeholder="请输入手机号" v-model.trim="form.mobile" :maxlength="50"></el-input>
          </label>
          <label for="" class="choose">
            <el-button icon="search" type="primary" size="small" @click="search" v-resetClick>搜索</el-button>
          </label>
        </el-col>
      </el-row>
    </form>
    <div class="title">
      <el-button class="titleright" icon="document" type="primary" @click="addFirm()" v-resetClick size="small">新增</el-button>
    </div>
    <el-row class="data-list">
      <el-table :data="lists" border class="table_box" style="width:100%" :empty-text="emptyText">
        <el-table-column prop="user_name" label="账号名称" align="center"></el-table-column>
        <el-table-column prop="name" label="用户名称" align="center"></el-table-column>
        <el-table-column prop="role_name" label="所属权限" align="center"></el-table-column>
        <el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
        <el-table-column prop="created" label="创建时间" align="center"></el-table-column>
          <el-table-column prop="isEnable" label="启用/禁用" align="center">
            <template slot-scope="scope">
            <el-switch @change="switchEvemt(scope.row)" v-model="scope.row.isEnable" active-text="启用" inactive-text="禁用"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="editFirm(scope.row)">编辑</el-button>
            <el-button type="text" @click="delEvemt(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paginate :callback="pageObj.callback" :page="pageObj.page"></paginate>
    </el-row>
    <el-dialog :title="ruleForm.id ? '编辑账号' : '新增账号'" :visible.sync="isDialogShow" :show-close="false" :destroy-on-close="true" :close-on-click-modal="false" width="40%" custom-class="customWidth">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="账号名称:" :label-width="formLabelWidth" prop="user_name">
          <el-input v-model="ruleForm.user_name" autocomplete="off" style="width: 350px;" placeholder="请输入账号名称"></el-input>
        </el-form-item>
        <el-form-item label="密  码:" :label-width="formLabelWidth" prop="password" v-if="!ruleForm.id">
          <el-input v-model="ruleForm.password" autocomplete="off" style="width: 350px;" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="所属权限:" :label-width="formLabelWidth" prop="role_id">
          <el-select v-model="ruleForm.role_id" placeholder="请选择权限" style="width: 350px;">
            <el-option v-for="item in rolelistData" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名称:" :label-width="formLabelWidth" prop="name">
          <el-input v-model="ruleForm.name" autocomplete="off" style="width: 350px;" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" :label-width="formLabelWidth" prop="mobile">
          <el-input v-model="ruleForm.mobile" autocomplete="off" style="width: 350px;" :maxlength='11' placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="备  注:" :label-width="formLabelWidth" prop="remarks">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入备注" v-model="ruleForm.remarks" autocomplete="off" style="width: 350px;"></el-input>
        </el-form-item>
        <el-form-item label="启用/禁用:" :label-width="formLabelWidth" prop="enable">
          <el-radio-group v-model="ruleForm.enable">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submitForm('ruleForm', 2)">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm', 1)">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { userlist, userstatus, userdel, rolelist, useradd, userupdate } from 'api/txEquipment/index'
import ctable from 'components/common/ctable'
import paginate from 'components/common/paginate'
export default {
  data () {
    const mobileV = (rule, value, callback) => {
      if (!value || (!(/^1[0-9]{10}$/).test(value) && !/\*{3,}/.test(value))) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    return {
      isDialogShow: false,
      formLabelWidth: '120px',
      formLabelWidth2: '60px',
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      rolelistData: [],
      lists: [], // 数据列表,
      ruleForm: {
        user_name: '',
        password: '',
        role_id: '',
        name: '',
        mobile: '',
        remarks: '',
        enable: ''
      },
      rules: {
        user_name: [
          { required: true, message: '请输入账号名称', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        role_id: [
          { required: true, message: '请选择权限', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { required: true, validator: mobileV, trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ],
        enable: [
          { required: true, message: '请选择启用/禁用', trigger: 'change' }
        ]
      },
      form: {
        user_name: '',
        name: '',
        mobile: ''
      },
      formObj: {}
    }
  },
  created () {
    this.filterObjEvemt()
    rolelist({
      pageIndex: 0,
      pageSize: 1000
    }).then(res => {
      this.rolelistData = res.data
    })
  },
  components: {
    ctable,
    paginate
  },
  methods: {
    submitForm (formName, num) {
      if (num === 1) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.ruleForm.id) {
              userupdate(this.ruleForm).then(res => {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.getData(1)
                this.isDialogShow = false
              })
            } else {
              useradd(this.ruleForm).then(res => {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
              })
              this.getData(1)
              this.isDialogShow = false
            }
          }
        })
      } else {
        this.$refs[formName].resetFields()
        this.isDialogShow = false
      }
    },
    getData (int) { // 获取数据
      userlist({
        pageIndex: int - 1,
        pageSize: 10,
        ...this.formObj
      }).then(res => {
        res.data.forEach(element => {
          element.isEnable = element.enable === 1
        })
        this.lists = res.data
        this.pageObj.page = res.page
      })
    },
    search () {
      this.filterObjEvemt()
    },
    // 新增厂商
    addFirm () {
      this.ruleForm = {
        user_name: '',
        name: '',
        password: '',
        role_id: '',
        mobile: '',
        remarks: '',
        enable: ''
      }
      this.isDialogShow = true
    },
    switchEvemt (data) {
      userstatus({id: data.id, enable: data.enable === 1 ? 2 : 1}).then((res) => {
        this.filterObjEvemt()
        this.$message({
          message: '切换成功',
          type: 'success'
        })
      })
    },
    // 编辑厂商
    editFirm (data) {
      this.ruleForm = {
        id: data.id,
        user_name: data.user_name || null,
        name: data.name || null,
        role_id: data.role_id || null,
        mobile: data.mobile || null,
        remarks: data.remarks || null,
        enable: data.enable || null
      }
      this.isDialogShow = true
    },
    // 删除
    delEvemt (data) {
      this.$confirm('是否删除该账号？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userdel({id: data.id}).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getData(1)
        })
      }).catch(() => {
      })
    },
    filterObjEvemt () {
      let obj = {}
      for (const key in this.form) {
        if (this.form[key] === '' || this.form[key] === null || this.form[key] === undefined) continue
        switch (key) {
          case 'password8888':
            obj[key] = this.form[key]
            break
          default:
            obj[key] = this.form[key]
            break
        }
      }
      this.formObj = JSON.parse(JSON.stringify(obj))
      this.getData(1)
      return obj
    }
  }
}
</script>
<style lang="less" scoped>
.firm-manage {
  /deep/ .customWidth{
    min-width: 560px;
  }
  .width200{width: 200px;}
  .title {
    overflow: hidden;
    padding: 16px 30px;
    padding-bottom: 0;
  }
  .search-box {
    padding: 20px 30px;
    background: #ffffff;
  }
  .data-list {
    padding: 10px 30px;
  }
  .choose {
    margin-right: 10px;
    .select-box {
      width: 120px;
    }
    .year-box {
      width: 150px;
    }
  }
  .titleright{
    float: right;
    margin-left: 20px;
  }
}
</style>
